<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>双轴 Guide</title>
  <link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
  <canvas id="mountNode"></canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
  let data = [
    {year: '2013',manage: 100,netAmount: 200,name: "经营活动产生现金流"},
    {year: '2014',manage: 110,netAmount: 150,name: "经营活动产生现金流"},
    {year: '2015',manage: 115,netAmount: 123,name: "经营活动产生现金流"},
    {year: '2016',manage: 230,netAmount: 250,name: "经营活动产生现金流"},
    {year: '2017',manage: 180,netAmount: 280,name: "经营活动产生现金流"},
    {year: '2018',manage: 160,netAmount: 230,name: "经营活动产生现金流"},
    {year: '2013',manage: 200,netAmount: 200,name: "投资活动产生现金流"},
    {year: '2014',manage: 140,netAmount: 150,name: "投资活动产生现金流"},
    {year: '2015',manage: 150,netAmount: 123,name: "投资活动产生现金流"},
    {year: '2016',manage: 230,netAmount: 250,name: "投资活动产生现金流"},
    {year: '2017',manage: 196,netAmount: 280,name: "投资活动产生现金流"},
    {year: '2018',manage: 150,netAmount: 230,name: "投资活动产生现金流"},
    {year: '2013',manage: 200,netAmount: 200,name: "筹资活动产生现金流"},
    {year: '2014',manage: 370,netAmount: 150,name: "筹资活动产生现金流"},
    {year: '2015',manage: 400,netAmount: 123,name: "筹资活动产生现金流"},
    {year: '2016',manage: -450,netAmount: 250,name: "筹资活动产生现金流"},
    {year: '2017',manage: 260,netAmount: 280,name: "筹资活动产生现金流"},
    {year: '2018',manage: 140,netAmount: 230,name: "筹资活动产生现金流"}]
;

  const chart = new F2.Chart({
    id: 'mountNode',
    syncY: true,
    pixelRatio: window.devicePixelRatio
  });

  chart.source(data);
  chart.axis('netAmount', false); // 隐藏

  chart.interval().position('year*manage').color('name').adjust('stack');
  chart.line().position('year*netAmount');
  chart.render();
</script>
</body>
</html>
